import React, { Component } from 'react';
import { StyleSheet, View ,FlatList,Image,Dimensions} from 'react-native';
import {getIdFlatListData} from '../testServer/FlatListDataServer';
import {
  Container,
  Card,
  CardItem,
  Thumbnail,
  Button,
  Text,
  Icon,
  Left,
  Right,
  Body,
  Content,
} from 'native-base';
import TimeAgo from 'react-native-timeago';
let moment = require('moment'); //load moment module to set local language
require('moment/locale/zh-cn'); //for import moment local language file during the application build
moment.locale('zh-cn'); //set moment local language to zh-cn
import FitImage from 'react-native-fit-image';
import axios from 'axios';
import {connect} from 'react-redux'
import { addToCart } from '../actions';


class SettingsDetailsScene extends Component {
  constructor(props){
    super(props);
    this.state={
      getData:{}
    }
  }
  /* componentDidMount(){
    getIdFlatListData({id:this.props.item.id}).then(
      data=>{
        console.log(11,data)
        this.setState({
          getData:[...data]
        })
      }
    )
  } */
  componentDidMount(){
    axios({
      method:'get',
      url:`http://192.168.191.1:3000/people/${this.props.item.id}`
    }).then(res=>{
      this.setState({
        getData:res.data
      })
    })
   
  }


  render() {
    console.log("this.state.getData",this.state.getData)
    const {avatar,name,publishDate,img,text,star} = this.state.getData;
    console.log("this.props",this.props)
    const {addToCart} = this.props;
    console.log("this.state",this.state)
    return (
      <Container>
        <Content>

        <Card style={{ flex: 0 }}>
      <CardItem>
        <Left>
          <Thumbnail source={{ uri: avatar }} />
          <Body>
            <Text>{name}</Text>
            <Text note>
              <TimeAgo time={publishDate} />
            </Text>
          </Body>
        </Left>
      </CardItem>
      <CardItem>
        <Image
          source={{ uri: img }}
          resizeMode="cover"
          style={{ height: 200, width: Dimensions.get('window').width, flex: 1 }}
        />
      </CardItem>
      <CardItem>
        <Body>
          <Text>{text}</Text>
        </Body>
      </CardItem>
      <CardItem>
        <Left>
          <Button transparent textStyle={{ color: '#87838B' }}>
            <Icon name="logo-github" />
            <Text>{star}</Text>
          </Button>
        </Left>
        
      </CardItem>
      
    </Card>
      <Button full danger onPress={()=>addToCart(this.state.getData)}>
        <Text>加入购物车</Text>
      </Button>

        </Content>
        
      </Container>
      
    );
  }
}


const mapStateToProps = state => {
  console.log("CCC",state)
  return {
    cartLists: state.cart.lists
  };
};


export default connect(
  mapStateToProps,
  { addToCart }
)(SettingsDetailsScene);


